@import './commonPC/_crumbs.less';
@import './commonPC/_imgDetail.less';
@import './commonPC/_infiniteScroll.less';

.rank-list{	
  	display: flex;
  	justify-content: space-between;
  	.sub-menu{
  		position: relative;
  	}
	.sub-list{
		width:280px;
		background:rgba(248,251,254,0.8);
		border-radius: 10px;
		padding:24px 16px;
		margin: 0 0 24px 0;
		h5{
			
			font-family: Roboto-Bold, Roboto;
			font-size: 18px;
			color: #121212;
			line-height: 28px;
			font-weight: bold;
			margin: 0 0 24px 0;
			padding-left:33px;
			background: url(../images/brand/ic_links@2x.png) no-repeat left top/21px 24px;
		}
		&:nth-of-type(1){
			h5{
				background: url(../images/brand/ic_brands@2x.png) no-repeat left top/21px 24px;			
			}
		}
		&:nth-of-type(2){
			h5{
				background: url(../images/brand/ic_products@2x.png) no-repeat left top/21px 24px;			
			}
		}
		li{
			/*font-family: SFUIDisplay-Regular;*/
			color: #666666;
			letter-spacing: 0.5px;
			line-height: 20px;
			margin: 0 0 24px 0;
			&.current{
				a{color:#177FE9;}
			}
			a:hover{
				text-decoration:none;
				color:#177FE9;
			}
		}
	}
	.current{
		&.quick-list{
			display: block;
		}
	}
	.quick-list{
		display: none;
		li{
			cursor: pointer;
			&.current{
				color:#177FE9;
			}
			&:hover{
				color:#177FE9;				
			}
		}
	}
}
.left-show{
	width: 860px;
	.title{
		display: flex;
		margin: 0 0 24px 0;
		align-items: center;
		h3{
			font-family: Roboto-Medium;
			font-size: 28px;
			color: #121212;
			letter-spacing: 1px;
			line-height: 42px;
			margin: 0 32px 0 0;
		}
		.attention{
			background: url("../images/index/mobile/favorite@3x.png");
			background-size:24px 24px;
			width: 24px;
			height: 24px;
			&.favorited{
				background:url('../images/index/mobile/favorited@3x.png');
				background-size:24px 24px;
			}
			
		}
	}
	.user{
		display: flex;
		line-height: 32px;
		margin: 0 0 16px 0;
		img{
			width:32px;
			height: 32px;
			border-radius: 10px;
		}
		.name{
			font-size: 16px;
			color: #666666;
			letter-spacing: 0.5px;
			margin: 0 0 0 16px;
			a{
				color:#177FE9;
			}
		}
		.time{
			font-size: 16px;
			color: #999999;
			letter-spacing: 0.5px;
			margin: 0 0 0 16px;
		}
	}
	.abstract{
		font-size: 18px;
		color: #333333;
		letter-spacing: 0.5px;
		line-height: 26px;
		margin: 0  0 40px 0;
		overflow: hidden;
	    position: relative;
		.more{
			font-size: 18px;
			color: #177FE9;
			letter-spacing: 0.5px;
			line-height: 26px;
			position: absolute;
			right:0;
			bottom: 0;
			padding: 0 15px 0 35px;
			background: #fff;
		}
		p{
			margin: 0  0 26px 0;
		}
	}
	.div-ellipsis{
		max-height: 52px;
	}
	.attribute{
		background: #F9FCFE;
		border-radius: 20px;
		height: 40px;
		line-height: 40px;
		display: flex;
		margin: 0 0 40px 0;
		li{
			margin:0 38px 0 0;
			padding:0 26px;
			cursor:pointer;
			font-size: 16px;
			letter-spacing: 0.5px;
		}
		.current{
			background: #177FE9;
			border-radius: 32px;
			color:#fff;
			a{
				color:#fff;
			}
			
		}
	}
	.current{
		.rank{
			display:block;
		}
	}
	.rank{
		margin:0 0 40px 0;
		&.animation{
			li{
				width: 0!important;
			}
		}
		li{
			cursor: pointer;
			margin: 0 0 16px 0;
			border-radius: 32px;
			height: 40px;
			font-family: Roboto-Medium;
			font-size: 16px;
			color: #FFFFFF;
			letter-spacing: 0.5px;
			line-height: 40px;
			padding: 0 0 0 23px;
			transition: width 1s;
			-moz-transition: width 1s; /* Firefox 4 */
			-webkit-transition: width 1s;
			&:nth-child(1){
				background-color: #FA3D5B;
			}
			&:nth-child(2){
				background-color: #CA53FF;
			}
			&:nth-child(3){
				background-color: #FFAA4A;
			}
			&:nth-child(4){
				background-color: rgba(23,127,233,0.66);
			}
			&:nth-child(4)~li{
				background-color: rgba(23,127,233,0.66);
			}
			
		}
	}
	.production{
		display: none;
		&.current{
			display: block;
		}
	}
	.production-detail{
		margin:0 0 32px 0;
		background: #FFFFFF;
		border: 1px solid #E7F2FC;
		box-shadow: 0 2px 8px 0 rgba(153,153,153,0.12);
		border-radius: 10px;
		padding: 32px 24px;
		&.detail-ellipsis{
			.details{
				max-height: 190px;
				overflow: hidden;
			}
			.view-more{
				margin-top: -14px;
				i{
					display:inline-block;
					width:10px;
					height:5.8px;
					background-image: url("../images/index/down@2x.png");
					background-size:10px 5.8px;
					margin-left:8px;
				}
			}
		}
		.sub-channel{
			display: flex;
			margin: 0 0 24px 0;
			position: relative;
			&:hover{
				text-decoration:none;
				.channel-title{
					text-decoration: underline;
				}
			}
		}
		&:last-child{
			margin:0 0 80px 0;
		}
		.star{
			width: 105px;
			display: flex;
			position: absolute;
		    right: 0;
		    top: 14px;
			.blue,.half,.gray{
				width: 20px;
				height: 20px;
				background-size: 20px 20px;
				margin:0 1px 0 0;
				display: inline-block;
			}
			.blue{
				background-image: url("../images/0BF31614-20FC-4D52-BFC5-691D6EAE7B03@2x.png");
			}
			.half{
				background-image: url("../images/331974AE-E488-435E-97BD-0A6849B35E40@2x.png");
			}
			.gray{
				background-image: url("../images/95EA68AB-A5E8-4829-8E05-989D4C143461@2x.png");
			}
		}
		.icon{
			font-family: Roboto-Bold;
			font-size: 18px;
			color: #FA3D5B;
			letter-spacing: 0;
			background-size: 54px 48px;
			width: 54px;
			height: 48px;
			text-align: center;
    		line-height: 48px;
    		margin:0 16px 0 0;
		}
		.channel-title{
			font-size: 20px;
			color: #121212;
			letter-spacing: 0.5px;
			line-height: 48px;
			font-family: Roboto-Medium;
		}
		.icon1{
			color: #FA3D5B;
			background-image: url(../images/34B15350-7764-4712-820C-64127E1A194E@2x.png);
		}
		.icon2{
			color:#CA53FF;
			background-image: url(../images/6EC76341-2559-4DC7-A8B6-3B47E3B8CA1A@2x.png);
		}
		.icon3{
			color:#FFAA4A;
			background-image: url(../images/116AA769-A5D1-4FEE-AE9F-3636A33AF36F@2x.png);
		}
		.icon4{
			color:#177FE9;
			background-image: url(../images/7DA85284-323D-4BE2-95B7-60C65EF4A82A@2x.png);
		}
		.details{
			font-size: 18px;
			letter-spacing: 0.5px;
			line-height: 28px;
			p{
				margin:0 0 28px 0;
				&:last-child{
					margin:0;
				}
			}
		}
		.view-more{
			font-family: Roboto-Medium;
			display: block;
			color: #177FE9;
			letter-spacing: 0.5px;
			text-align: center;
			background-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 23%, #FFFFFF 59%, #FFFFFF 100%);
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-size: 810px 40px;
		    position: relative;
		    &.down{
		    	i{
		    		display:inline-block;
					width:10px;
					height:5.8px;
					background-image: url("../images/index/up@2x.png");
					background-size:10px 5.8px;
					margin-left:8px;
					vertical-align:middle;
		    	}
		    }
		}
		.img-details{
			display: flex;
			overflow: hidden;
			margin: 24px 0 0 0;
			a{
				border: 1px solid #E4E4E4;
				border-radius: 10px;
				position: relative;
				margin:0 23px 0 0;
				overflow: hidden;
				display: inline-block;
				&:last-child{
					margin:0;
				}
			}
			.img-show{
				width: 144px;
				height: 144px;
				img{
					width: 144px;
					height: 144px;
				}
			}
			.price{
				font-family: Roboto-Medium;
				letter-spacing: 0.5px;
				background: #FA3D5B;
				border-radius: 0 100px 100px 10px;
				color: #fff;
				font-size: 16px;
				padding: 0 18px;
				line-height: 26px;
				height: 26px;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}
}
.recommend{
	font-family: Roboto-MediumItalic;
	font-size: 28px;
	color: #121212;
	letter-spacing: 0.5px;
	line-height: 38px;
	font-style:italic;
	padding:16px 0 40px 0;
	border-top:1px solid #121212;
}
.best-list{display:none;}
.recommend-more{
	display:block;
	margin:10px auto 20px
}

